<template>

  <div style="width: 100%;margin-top: 20px;background-color: white;border-radius: 4px;">

    <div v-if="userVideoList.length===0">
      <el-empty :image-size="200" :description="'什么也没有'"/>
    </div>
    <div v-else>
      <div class="common-video-container" v-for="video in userVideoList">
        <VideoBox :video_id="video.uuid" :video_author="video.username" :video_time="video.time" :video_title="video.title"/>
      </div>
    </div>

  </div>

</template>

<script setup>

import {onMounted, ref} from "vue";
import {useUserInfoStore} from "../../../store/UserInfoStore";
import {postRequest} from "../../../util/requestUtil";
import {GET_USER_VIDEO_LIST_API} from "../../../api/video";
import VideoBox from "../../common/VideoBox.vue";
import {formatTimeObj} from "../../../util/common";

const userInfoStore = useUserInfoStore();

const userVideoList = ref([])

function formatVideoData(video_list){
  for (let i = 0; i < video_list.length; i++) {
    let video = video_list[i];
    video.time = formatTimeObj(video.time);
  }
}

onMounted(()=>{
  let formData = new FormData()
  formData.append('id', userInfoStore.userInfo.id)
  postRequest(GET_USER_VIDEO_LIST_API, formData, (data)=>{
    let video_list = data.videos;
    formatVideoData(video_list);
    userVideoList.value = video_list;
    console.log(userVideoList.value[0].time)
  }, ()=>{}, ()=>{}, false);
})

</script>

<style scoped>

</style>